<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>道具中心</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <!-- 引入样式vant -->
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />
    <script src="../common/ui/vant-ui/ui.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <!-- 顶部 -->
          <div class="pd20 tbgc">
            <div class="flex jcsb">
              <div class="flex aic">
                <div class="mgr8 ndis500"><van-icon name="arrow-left" size="20" /></div>
                <div class="flex pore">
                  <span class="mgr8" @click="tab=0" :class="tab==0?'fwb':''"
                    >道具中心</span
                  >
                  <span @click="tab=1" :class="tab==1?'fwb':''">我的道具</span>
                  <div class="tab" :class="tab==1?'leftTab':''"></div>
                </div>
              </div>
              <div class="flex">
                <div class="mgr8"><van-icon name="service-o" size="20" /></div>
                <div><van-icon name="bag-o" size="20" /></div>
              </div>
            </div>
            <div class="mgt20">
              <div>
                <van-icon name="star-o" />&nbsp;<span class="c9 fs12"
                  >我的直豆</span
                >
              </div>
              <div class="w100 flex jcsb">
                <div class="fs32 fwb">{{ myInfo.zd }}</div>
                <div class="mtag prBoder cf">充值直豆</div>
              </div>
            </div>
          </div>
          <!-- 今日推荐 -->
          <div class="mcard">
            <div class="cf flex aic pd8">
              <div class="mgr8">今日推荐</div>
              <div class="fs12">使用曝光权益卡,效果更佳!</div>
            </div>
            <div class="bgcf">
              <div class="flex jcsb">
                <div class="flex aic">
                  <div><van-icon name="star-o" size="32" /></div>
                  <div class="fs14 fwb">曝光权益卡</div>
                </div>
                <div class="redtag">曝光加强</div>
              </div>
              <div class="flex mgt10">
                <div class="minicard pd8 f1 mgr20">
                  <div class="fwb">持续曝光</div>
                  <div class="fs12 c9">14天持续优先曝光</div>
                </div>
                <div class="minicard pd8 f1">
                  <div class="fwb">效果保障</div>
                  <div class="fs12 c9">曝光次数有保证</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 职位栏 -->
          <div>
            <div class="card flex jcsb" v-for="i in property">
              <div class="flex aic">
                <div class="mgr8"><van-icon :name="i.icon" size="38" /></div>
                <div class="flex column">
                  <div class="fwb">{{ i.name }}</div>
                  <div class="fs12 c9">{{ i.msg }}</div>
                </div>
              </div>
              <div class="redtag">{{ i.btn }}</div>
            </div>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer></main-footer>
    </div>
  </body>
</html>
<style>
  .tbgc {
    background-color: rgb(149, 219, 91);
  }
  .tab {
    width: 58px;
    height: 4px;
    background-color: #11f01c;
    position: absolute;
    bottom: 2px;
    opacity: 0.6;
    left: 0;
    transition: left 0.3s;
  }
  .leftTab {
    left: 72px;
  }
  .mtag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 20px;
  }
  .mcard {
    margin: 5px 20px;
    background-color: #21ad77;
    border: 2px solid #21ad77;
    border-radius: 12px;
  }
  .bgcf {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
  }
  .cardGroup {
    display: flex;
    justify-content: space-between;
  }
  .redtag {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(223, 74, 74);
    color: #fff;
    width: 60px;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 20px;
    height: 25px;
  }
  .minicard {
    padding: 5px 10px 12px 10px;
    background-color: #e2fad5;
    border-radius: 5px;
  }
  @media (min-width:500px){
    .tbgc{
      border-radius: 10px 10px 0 0;
    }
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      tab: 0,
      myInfo: {
        zd: 0,
      },
      property: [
        {
          icon: "star-o",
          name: "找不到心仪牛人?",
          msg: "搜索畅聊卡",
          btn: "搜索找人",
        },
        {
          icon: "star-o",
          name: "招聘速度慢怎么办?",
          msg: "牛人炸弹pro",
          btn: "群发消息",
        },
        {
          icon: "star-o",
          name: "职位曝光少怎么办?",
          msg: "牛人直播卡",
          btn: "置顶职位",
        },
        {
          icon: "star-o",
          name: "更多更准的曝光?",
          msg: "精准置顶卡",
          btn: "搜索曝光",
        },
      ],
    },
    components: {
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {},
  });
</script>
